<template>
	<view class="content">
		<f-navbar :title="title" fontColor="#333" fontSize="34" bgColor="#fff">
			<view class="u-flex" slot="left">
				<van-icon name="arrow-left" color="#333" size="20" />
			</view>
		</f-navbar>
		<view class="content_box">
			<!-- 待支付页面 -->
			<view class="payment_box" v-if="isshowtime">
				<view class="payment_time">
					<van-icon class="time_icon" name="clock-o" custom-style="font-weight:700" size="18"
						color="#ff0000" />
					等待付款
				</view>
				<view class="payment_title">
					需付款：￥{{dataobj.wait_info.total_free}} &nbsp;&nbsp; 剩余：{{countdownh}}小时{{countdownm}}分钟
				</view>
				<view class="payment_submit" @click="ongopay">
					去支付
				</view>
			</view>

			<view class="content_top">
				<view class="content_topL">
					<view class="content_topname">
						<!-- <view class="mapicon"></view> -->
						<image class="mapicon" :src="imgurl+'dizhiicon.png'" mode=""></image>
						<view class="content_name">{{dataobj.order_info.receive_name}}</view>
						<view class="content_topphone">{{dataobj.order_info.receive_phone}}</view>
					</view>
					<view class="content_topaddress">{{dataobj.order_info.receive_full_address}}</view>
				</view>
				<!-- <van-icon class="right_icon" name="arrow" size="20" color="#999" /> -->

			</view>
			<!-- <view class="kuaidibox">
				<image class="kuaidibox_img" :src="imgurl+'kuaidi_icon.png'" mode=""></image>
				<view class="kuaidibox_txt">正在出库</view>
			</view> -->
			<view class="shops_box" v-for="(storeitem,storeindex) in dataobj.order_item" :key="storeindex">
				<view class="shops_boxtop">
					<view class="shops_boxtopL" @click="onstoredetail(storeitem)">
						<image class="shops_boxtopLimg" :src="imgurl+'shop_icon.png'" mode=""></image>
						<view class="shops_boxtopLname">{{storeitem.store_name}}</view>
						<van-icon name="arrow" size="12" color="#999" />
					</view>
					<view class="shops_boxtopR" v-if="storeitem.item[0].refund_status==-1">退款中</view>
					<view class="shops_boxtopR1" v-if="storeitem.item[0].refund_status==-3">已驳回</view>
					<view class="shops_boxtopR2" v-if="storeitem.item[0].refund_status==-2">已同意</view>
				</view>
				<view class="content_shopbox" v-for="(shopitem,shopindex) in storeitem.item" :key="shopindex">
					<!-- <view class="content_shopimg"> -->
					<image class="content_shopimg" :src="shopitem.good_item_img" mode=""></image>
					<!-- </view> -->
					<view class="content_shopR">
						<view class="content_shopRtxt">
							<view class="content_shopRtxtL">
								{{shopitem.title}}
							</view>
							<view class="content_shopRtxtprice">￥{{shopitem.tree_price}}</view>
						</view>
						<view class="content_shopguige">
							<view class="content_shopguigeL">{{shopitem.spec_title}}</view>
							<view class="content_shopguigenum">*{{shopitem.buy_num}}</view>
						</view>
						<view class="shouhou_box" v-if="dataobj.order_info.status==2">
							<view class="shouhou_boxitem" @click="onAfterSales(shopitem)">
								申请售后
							</view>
						</view>
						<view class="shouhou_box" v-if="dataobj.order_info.status==3">
							<view class="shouhou_boxitem" @click="onAfterSales(shopitem)">
								申请售后
							</view>
						</view>
						<view class="shouhou_box" v-if="dataobj.order_info.status==4">
							<view class="shouhou_boxitemone" v-if="shopitem.is_com>0">
								去评价
							</view>
							<view class="shouhou_boxitem" v-else @click="onevaluate(shopitem)">
								去评价
							</view>
					 <!-- @click="onAfterSales(shopitem)" -->
							<view class="shouhou_boxitemone">
								申请售后
							</view>
						</view>
						<!-- 	<view class="content_heji">合计：<text class="priceicon">￥</text><text
								class="price">31.60</text></view> -->
					</view>
				</view>
			</view>
			<view class="infobox">
				<view class="info_bianhao">
					<view class="info_bianhaoname">
						订单编号
					</view>
					<view class="info_bianhaoR">
						{{dataobj.order_info.trade_no}}
						<text class="fuzhi" @click="onfuzhi">
							复制
						</text>
					</view>
				</view>
				<view class="info_bianhao">
					<view class="info_bianhaoname">
						下单时间
					</view>
					<view class="info_bianhaoR">
						{{dataobj.order_info.create_at}}

					</view>
				</view>
				<view class="info_bianhao">
					<view class="info_bianhaoname">
						支付方式
					</view>
					<view class="info_bianhaoR">
						微信支付

					</view>
				</view>
				<view class="info_bianhao">
					<view class="info_bianhaoname">
						商品总额
					</view>
					<view class="info_bianhaoR">
						￥{{dataobj.order_info.total_amount}}

					</view>
				</view>
				<view class="info_bianhao">
					<view class="info_bianhaoname">
						使用余额
					</view>
					<view class="info_bianhaoR">
						-￥{{dataobj.order_info.balance_amount}}
						<!-- <van-icon name="arrow" size="15" color="#999" /> -->
					</view>
				</view>
				<view class="info_bianhao">
					<view class="info_bianhaoname">
						运费
					</view>
					<view class="info_bianhaoR">
						<!-- ￥{{dataobj.order_info.express_amount}}（已包邮） -->
						￥{{dataobj.order_info.express_amount}} <text v-if="dataobj.order_info.express_amount=='0.00'">（已包邮）</text>

					</view>
				</view>
				<view class="fukuanbox">
					<view class="fukuanmoney">已付款: <text class="fukuanicon">￥</text><text
							class="fukuan_price">{{dataobj.order_info.total_free}}</text></view>
				</view>
			</view>
			<block v-if="dataobj.service_item && dataobj.service_item.length!==0">
			<view class="shouhou_box1" v-for="(serviceitem,serviceindex) in dataobj.service_item" :key="serviceindex">
				<view class="shouhou_title">
					售后申请
				</view>
				<view class="shouhou_name">
					{{serviceitem.nickname}}  <text class="shouhou_time">{{serviceitem.create_at}}</text>
				</view>
				<view class="shouhou_txt">
					<view class="yuanyin">
						{{serviceitem.remarks}}
					</view>
					<view class="shouhou_imgbox">
						<view class="shouhouimg" v-for="(imgitem,imgindex) in serviceitem.images" :key="imgindex">
							<image class="shouhouimg1" :src="imgitem" mode=""></image>
						</view>
					</view>
				</view>
				<block v-if="serviceitem.status==-3">
					<view class="shouhou_name1">
						{{serviceitem.store_name}} <text class="shouhou_time">{{serviceitem.operate_time}}</text>
					</view>
					<view class="shouhou_txt">
						<view class="yuanyin">
							{{serviceitem.refuse_reason}}
						</view>
						<view class="shouhou_imgbox">
							<view class="shouhouimg" v-for="(imgitem1,imgindex1) in serviceitem.refuse_imgs" :key="imgindex1">
								<image class="shouhouimg1" :src="imgitem1" mode=""></image>
							</view>
						</view>
					</view>
				</block>
			</view>
			</block>
			<!-- 		<view class="payment_btnbox">
				<view class="payment_cancell">
					取消订单
				</view>
				<view class="payment_zhifu">
					立即付款
				</view>
			</view> -->
			<view class="info_bottomone">
				
			</view>
			<view class="info_bottom" v-if="dataobj.order_info.status==1">
				<view class="shouhoubtn" @click="oncancelorder(dataobj.order_info)">
					取消订单
				</view>
				<view class="shouhuobtn" @click="ongopay">
					立即付款
				</view>
			</view>
			<view class="info_bottom" v-if="dataobj.order_info.status==3">
				<view class="shouhuobtn" @click="onshuohuo(dataobj.order_info)">
					确认收货
				</view>
			</view>
			<view class="info_bottom" v-if="dataobj.order_info.status==4">
				<view class="yiwancheng">
					已完成
				</view>

			</view>
		</view>
		<!-- <van-popup :show="isshowpopup" closeable round :close-on-click-overlay="false" position="bottom"
			@close="onClosepopup">
			<view class="balance_box">
				<view class="balance_item">
					<view class="balance_itemL">
						可用余额
					</view>
					<view class="balance_itemR">
						￥{{balancePrice1}}
						<van-checkbox class="duihaoicon" :value="ischecked" checked-color="#ff0000"
							@change="onChange"></van-checkbox>
					</view>
				</view>
			</view>
		</van-popup> -->
		<van-popup :show="isshowAfterSales" closeable round :close-on-click-overlay="true"
			custom-style="max-height: 70%;" position="bottom" @close="onCloseAfterSales">
			<view class="afterSales_box">
				<view class="afterSales_title">申请售后</view>
				<view class="afterSalestxt">
					<textarea :value="reasonsValue" class="afterSalestext" auto-height placeholder-class="afterSales_in"
						placeholder="输入申请理由" @input="onshuohou" />
				</view>
				<view class="afterSales_upload">
					<view class="uploadimg_item" @click="onUploadimg">
						<!-- <view class="upload_icon"> -->
						<image class="upload_icon" :src="imgurl+'upload_img.png'" mode=""></image>
						<!-- </view> -->
						<view class="upload_txt">
							上传图片
						</view>
					</view>
					<view class="upload_photo" v-for="(imgitem,imgindex) in picArr" :key="imgindex">
						<image class="upload_close" @click="deleteimg(imgindex)" :src="imgurl+'closeicon.png'" mode="">
						</image>
						<image class="upload_photo1" :src="imgitem" mode=""></image>
					</view>

				</view>
				<view class="afterSales_btn" @click="submitafterSales">
					确认申请
				</view>
			</view>
		</van-popup>

	</view>
</template>

<script>
	import fNavbar from '@/uni_modules/f-navbar/components/f-navbar/f-navbar.vue';
	let timer = require('../../../utils/wxTimer.js');
	import {
		getOrderByOrderNumber,
		cancelOrder,
		wxPay,
		confirmReceipt,
		applyAfterSales
	} from '../../../utils/app.js'
	export default {
		components: {
			fNavbar
		},
		data() {
			return {
				title: '待付款',
				active: '1',
				navHeight: 0, //导航栏的高度
				isshowOrder: true,
				imgurl: getApp().globalData.imgurl,
				apiUrl: getApp().globalData.apiUrl,
				isshowpopup: false, // 可用余额弹窗
				ischecked: false, //是否使用可用金额
				tradeNo: '', // 订单编号
				end_time: '', // 结束时间
				countdownh: '',
				countdownm: '',
				countdowns: '',
				timer: null, //重复执行
				isshowAfterSales: false, // 售后弹窗是否显示
				dataobj: {}, // 详情数据
				reasonsValue: '', // 申请售后理由
				picArr: [], // 售后图片数据
				status:'',
				order_sn:'', // 商品订单编号
				isshowtime:true,
				balancePrice: 0, // 可用余额
				balancePrice1: 0, // 可用余额
			}
		},
		onLoad(options) {
			console.log(options);
			this.tradeNo = options.tradeNo
			this.status = options.status
			this.getList()
			this.timer = setInterval(() => {
				this.showtime(this.end_time)
			},1000)
			// this.getPrice()
		},
		methods: {
			
			// 进店铺详情
			// onstoredetail(e){
			// 	console.log(e);
			// 	uni.navigateTo({
			// 		url:'/pages/storeDetail/storeDetail?storeid='+e.store_id
			// 	})
			// },
			
			// 获取可用余额
			// getPrice() {
			// 	getBaseUserInfo({}).then(res => {
			// 		console.log(res.data.balance_amount);
			// 		this.balancePrice = Number(res.data.balance_amount)
			// 		this.balancePrice1 = Number(res.data.balance_amount)
			// 	})
			// },
			
			
			// 去支付
			ongopay() {
				wxPay({
					trade_no: this.dataobj.order_info.trade_no
				}).then(res1 => {
					console.log(res1);
					let pay_params = res1.data
					console.log(res1.data);
					uni.requestPayment({
						timeStamp: pay_params.timestamp,
						nonceStr: pay_params.nonceStr,
						package: pay_params.package,
						signType: pay_params.signType,
						paySign: pay_params.paySign,
						success(res) {
							console.log(res);
							uni.showToast({
								title: '支付成功',
								icon: 'none'
							})
						},
						fail(res) {
							console.log(res);
							uni.showToast({
								title: '支付失败',
								icon: 'none'
							})
						}
					})
				})


			},
			// 点击取消订单
			oncancelorder(e) {
				console.log(e);
				cancelOrder({
					trade_no: e.trade_no
				}).then(res => {
					console.log(res);
					if (res.code == 1) {
						uni.showToast({
							title: '取消成功',
							icon: 'none'
						})
						var pages = getCurrentPages();
						var prevPage = pages[pages.length - 2]; //上一个页面
						console.log(prevPage);
						// prevPage.setData({
						//      userdata: {
						//        phonenum:this.phonenum
						//      }
						//    })
						prevPage.$vm.getList(true)
						uni.navigateBack({ //返回
							delta: 1
						})
					}

				})
			},
			// 点击确认收货
			onshuohuo(e) {
				console.log(e);
				confirmReceipt({
					trade_no: e.trade_no,
					order_no: e.order_no
				}).then(res => {
					console.log(res);
					if (res.code == 1) {
						uni.showToast({
							title: '收货成功',
							icon: 'none'
						})
						var pages = getCurrentPages();
						var prevPage = pages[pages.length - 2]; //上一个页面
						console.log(prevPage);
						// prevPage.setData({
						//      userdata: {
						//        phonenum:this.phonenum
						//      }
						//    })
						prevPage.$vm.getList(true)
						uni.navigateBack({ //返回
							delta: 1
						})
					}

				})
			},
			// 点击复制
			onfuzhi() {
				uni.setClipboardData({
					data: this.dataobj.order_info.trade_no,
					success(res) {

					}
				})
			},
			    showtime (itme) {
					// console.log('11111111');
							var nowtime = new Date(),  //获取当前时间
							endtime = new Date(itme);  //定义结束时间
							var lefttime = itme*1000 - nowtime.getTime(),  //距离结束时间的毫秒数
							leftd = Math.floor(lefttime/(1000*60*60*24)),  //计算天数
							lefth = Math.floor((lefttime/(1000*60*60)%24)+leftd*24) < 10 ? "0" + Math.floor((lefttime/(1000*60*60)%24)+leftd*24) : Math.floor((lefttime/(1000*60*60)%24)+leftd*24),  //计算小时数
							leftm = Math.floor(lefttime/(1000*60)%60) < 10 ? "0" + Math.floor(lefttime/(1000*60)%60) : Math.floor(lefttime/(1000*60)%60),  //计算分钟数
							lefts = Math.floor(lefttime/1000%60) < 10 ? "0" + Math.floor(lefttime/1000%60) : Math.floor(lefttime/1000%60);  //计算秒数
							this.countdownh = lefth  //返回倒计时的字符串
							this.countdownm = leftm//返回倒计时的字符串
							this.countdowns = lefts  //返回倒计时的字符串
							// 倒计时结束时，显示00:00:00
							// console.log('--------------------');
							// console.log(this.countdownh);
							// console.log(this.countdownm);
							// console.log(this.countdowns);
							if(lefttime < 0) {
								this.countdownh = this.countdownm= this.countdowns = "00"
								this.isshowtime = false
							}
							// if(lefth==0 && leftm<=30){
							// 	this.isshowtime = true
							// }
						},
			// 获取数据
			getList() {
				getOrderByOrderNumber({
					order_number: this.tradeNo,
					status: this.status
				}).then(res => {
					console.log(res);
					if(res.code==1){
						
						if(res.data.service_item!==''){
							res.data.service_item.forEach((item,index)=>{
								res.data.service_item[index].images = item.images.split(',')
							})
						}

						console.log('======');
						console.log(res.data);
						this.dataobj = res.data
						console.log(res.data.wait_info.length<1);
						if(res.data.wait_info==''){
							this.isshowtime = false
							console.log('0000');
						} else {
							console.log('1111');
							// this.end_time = res.data.wait_info.finish_time
							// this.end_time = new Date(res.data.wait_info.finish_time).getTime()
							this.end_time = res.data.wait_info.finish_time
							// console.log(this.end_time);
							this.isshowtime = true
							// console.log(this.end_time);
						
							// console.log(this.end_time);
						}
						if (res.data.order_info.status == 1) {
							this.title = '待付款'
						} else if (res.data.order_info.status == 2) {
							this.title = '待发货'
						} else if (res.data.order_info.status == 3) {
							this.title = '待收货'
						} else if (res.data.order_info.status == 4) {
							this.title = '已完成'
						} else if (res.data.order_info.status == 5) {
							this.title = '售后'
						}
						
					} else {
						var pages = getCurrentPages();
						var prevPage = pages[pages.length - 2]; //上一个页面
						console.log(prevPage);
						// prevPage.setData({
						//      userdata: {
						//        phonenum:this.phonenum
						//      }
						//    })
						// prevPage.$vm.getList(true)
						uni.navigateBack({ //返回
							delta: 1
						})
					}

				})
			},
			// 是否使用可用金额
			// onChange(e) {
			// 	console.log(e);
			// 	this.ischecked = e.detail
			// },
			// 打开可用余额弹窗
			// onbalance() {
			// 	this.isshowpopup = true
			// },
			// 关闭可用余额弹窗
			// onClosepopup() {
			// 	this.isshowpopup = false
			// },
			// 去评价
			onevaluate(e) {
				console.log(e);
				uni.navigateTo({
					url: '/pages/subPack/evaluate/evaluate?order_sn='+e.order_sn
				})
			},
			// 确认售后
			submitafterSales(){
				applyAfterSales({
					order_sn: this.order_sn,
					remarks: this.reasonsValue,
					images:this.picArr,
				}).then(res => {
					console.log(res);
					if (res.code == 1) {
						this.isshowAfterSales = false
						this.getList()
					}
				
				})
			},
			// 点击售后弹窗
			onAfterSales(e) {
				console.log(e);
				this.order_sn = e.order_sn
				this.isshowAfterSales = true
			},
			// 关闭售后弹窗
			onCloseAfterSales() {
				this.isshowAfterSales = false
			},
			// 售后理由输入内容
			onshuohou(e) {
				console.log(e);
				this.reasonsValue = e.detail.value
			},
			// 删除图片
			deleteimg(e) {
				let imgs = this.picArr
				imgs.splice(e, 1)
				this.picArr = imgs
				console.log(this.picArr);
			},
			// 上传售后图片
			onUploadimg() {
				let that = this
				if (that.picArr.length >= 6) {
					uni.showToast({
						title: `最多只能上传${that.picArr.length}张图片`,
						icon: 'none',
						mask: true,
						duration: 1500
					})
				} else {
					
					uni.chooseImage({
						count: 6,
						sourceType: ['camera', 'album'], //从相册选择
						success: chooseImageRes => {
							console.log('成功', chooseImageRes);
							const tempFilePaths = chooseImageRes.tempFilePaths;
							console.log(tempFilePaths);
							uni.showLoading({
								mask: true,
								title: '上传中...'
							})
							for (let i = 0; i < tempFilePaths.length; i++) {
								uni.uploadFile({
									url: this.apiUrl+'api/uploadFile', //仅为示例，非真实的接口地址
									filePath: tempFilePaths[i],
									name: 'file',
									formData: {
										file: tempFilePaths[i],
										type: '1'
									},
									success: res => {
										console.log(res);
										uni.hideLoading()
										// this.picArr.concat(JSON.parse(res.data).entity)
										let data1 = this.picArr.concat(JSON.parse(res.data).data
											.url)
										// let data1 = JSON.parse(res.data)
										console.log(data1);
										this.picArr = data1
										console.log(this.picArr);
										// if(data1.code==1){
										// 	setUserInfo({
										// 		fields:data1.data.url,
										// 		type:2
										// 	}).then(res1 => {
										// 		if(res1.code==1){
										// 			this.getList()
										// 		}
										// 	})
										// }
										// console.log('上传成功', JSON.parse(res.data));
										// uploadFile上传成功后，根据和后台的约定msgCode判断接口调用状态

									}
								});
								// uni.showLoading({
								// 	title: '正在上传...'
								// })

							}
							// this.avatarimg = tempFilePaths

						},
						// fail: err => {
						// 	this.myToast('图片上传失败', 'none');
						// }
					});
				}
			},
		}
	}
</script>

<style>
	page {
		background: #eee;
	}

	/* 待支付页面样式 */

	/* 待支付页面样式 */
	.payment_box {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.payment_time {
		font-size: 32rpx;
		font-family: Hiragino Sans GB;
		font-weight: 700;
		color: #FF0000;
		line-height: 70rpx;
		margin-top: 25rpx;
	}

	.time_icon {
		margin-right: 10rpx;
	}

	.payment_title {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: 700;
		color: #333333;
		margin-top: 35rpx;
		/* line-height: 70rpx; */
	}

	.payment_submit {
		width: 154rpx;
		height: 60rpx;
		background: #FF0000;
		border-radius: 30rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 60rpx;
		text-align: center;
		margin-top: 40rpx;
		margin-bottom: 20rpx;
	}

	.content_top {
		width: 690rpx;
		height: 215rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 16rpx;
		display: flex;
		align-items: center;
		position: relative;
	}

	.content_topL {
		margin-left: 61rpx;
	}

	.content_topname {
		display: flex;
		align-items: center;
		position: relative;
	}

	.content_name {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: 700;
		color: #333333;
		margin-left: 20rpx;

	}

	.content_topphone {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: 700;
		color: #333333;
		margin-left: 29rpx;
	}

	.content_topaddress {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		margin-top: 26rpx;
	}

	.right_icon {
		margin-right: 26rpx;
	}

	.mapicon {
		width: 21rpx;
		height: 30rpx;
		/* background: #000; */
		margin-left: -40rpx;
		/* margin-right: 20rpx; */
		/* 	position: absolute;
		top: 37rpx;
		left: 20rpx; */
	}

	.kuaidibox {
		width: 690rpx;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
	}

	.kuaidibox_img {
		width: 32rpx;
		height: 25rpx;
		/* background: #000; */
		margin-right: 20rpx;
		margin-left: 21rpx;
	}

	.kuaidibox_txt {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;

	}

	.shops_box {
		width: 690rpx;
		/* height: 529rpx; */
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		padding-bottom: 40rpx;
	}

	.shops_boxtop {
		padding-top: 39rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

	}

	.shops_boxtopL {
		display: flex;
		align-items: center;
		margin-left: 20rpx;
	}

	.shops_boxtopLimg {
		width: 32rpx;
		height: 30rpx;
		/* background: #000; */
		margin-right: 10rpx;
	}

	.shops_boxtopLname {
		font-size: 30rpx;
		font-family: Hiragino Sans GB;
		font-weight: 700;
		color: #333333;
		margin-right: 10rpx;
		/* line-height: 55rpx; */
	}

	.shops_boxtopR {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FF0000;
		margin-right: 20rpx;
		/* line-height: 2rpx; */
	}

	.shops_boxtopR1 {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #666;
		margin-right: 20rpx;
		/* line-height: 2rpx; */
	}

	.shops_boxtopR2 {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #42FF00;
		margin-right: 20rpx;
		/* line-height: 2rpx; */
	}

	.content_shopbox {
		display: flex;
		align-items: center;
		margin-top: 30rpx;
		margin-left: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #eee;
	}

	.content_shopbox:last-child {
		border-bottom: none;
	}

	.content_shopimg {
		width: 180rpx;
		height: 180rpx;
		/* background: #FF0000; */
		border-radius: 10rpx;
	}

	.content_shopR {
		margin-left: 20rpx;
		width: 66%;
	}

	.content_shopRtxt {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.content_shopRtxtL {
		width: 313rpx;
		min-height: 42rpx;
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		line-height: 42rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.content_shopRtxtprice {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: 500;
		color: #333333;
		line-height: 40rpx;
	}

	.content_shopguige {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 29rpx;
	}

	.content_shopguigeL {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #999999;
	}

	.content_shopguigenum {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #999999;
	}

	.shouhou_box {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-top: 20rpx;
	}

	.shouhou_boxitem {
		/* height: 41rpx; */
		padding: 6rpx 12rpx;
		box-sizing: border-box;
		border: 1rpx solid #FF0000;
		border-radius: 30rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FF0000;
		text-align: center;
		line-height: 40rpx;
		margin-right: 22rpx;
	}
	.shouhou_boxitemone{
		padding: 6rpx 12rpx;
		box-sizing: border-box;
		border: 1rpx solid #bbb;
		border-radius: 30rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #bbb;
		text-align: center;
		line-height: 40rpx;
		margin-right: 22rpx;
	}

	.shouhou_boxitem:last-child {
		margin-right: 0;
	}

	.content_heji {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		margin-top: 29rpx;
		/* line-height: 40rpx; */
	}

	.priceicon {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: 700;
		color: #FF0000;
		/* line-height: 40rpx; */
	}

	.price {
		font-size: 30rpx;
		font-family: Hiragino Sans GB;
		font-weight: 700;
		color: #FF0000;
		/* line-height: 40rpx; */
	}

	.infobox {
		width: 690rpx;
		height: 528rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 20rpx;
	}

	.info_bianhao {
		height: 66rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		line-height: 66rpx;
	}

	.info_bianhao:first-child {
		padding-top: 18rpx;
	}

	.info_bianhaoname {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: 500;
		color: #333333;
		margin-left: 20rpx;
	}

	.info_bianhaoR {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #999999;
		margin-right: 22rpx;
	}

	.fuzhi {
		/* display: inline-block; */
		font-size: 22rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #555555;
		padding: 3rpx 9rpx;
		background: #D2D2D2;
		border-radius: 13rpx;
		margin-left: 20rpx;
	}

	.fukuanbox {
		height: 98rpx;
		border-top: 1rpx solid #eee;
		margin: 0 20rpx;
		margin-top: 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.fukuanmoney {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: 700;
		color: #555555;
	}

	.fukuanicon {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: 700;
		color: #FF0000;
	}

	.fukuan_price {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: 700;
		color: #FF0000;
	}

	/* 底部支付按钮样式 */
	.payment_btnbox {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-right: 31rpx;
		margin-top: 40rpx;
	}

	.payment_cancell {
		width: 156rpx;
		height: 62rpx;
		border: 2rpx solid #BBBBBB;
		border-radius: 30rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #BBBBBB;
		line-height: 62rpx;
		box-sizing: border-box;
		text-align: center;
	}

	.payment_zhifu {
		width: 154rpx;
		height: 60rpx;
		background: #FF0000;
		border-radius: 30rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 60rpx;
		text-align: center;
		margin-left: 40rpx;
	}

.info_bottomone{
	width: 100%;
	height: 118rpx;
}
	.info_bottom {
		width: 100%;
		height: 98rpx;
		background: #FFFEFE;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		position: fixed;
		bottom: 0;
	}

	.shouhoubtn {
		width: 156rpx;
		height: 62rpx;
		border: 2rpx solid #BBBBBB;
		border-radius: 30rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #BBBBBB;
		line-height: 62rpx;
		box-sizing: border-box;
		text-align: center;
	}

	.shouhuobtn {
		width: 154rpx;
		height: 60rpx;
		background: #EF0E6C;
		border-radius: 30rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 60rpx;
		text-align: center;
		margin-right: 31rpx;
		margin-left: 39rpx;
	}

	.yiwancheng {
		width: 156rpx;
		height: 62rpx;
		border: 2rpx solid #BBBBBB;
		border-radius: 30rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #BBBBBB;
		line-height: 62rpx;
		box-sizing: border-box;
		text-align: center;
		margin-right: 31rpx;
	}


	.balance_box {
		width: 100%;
		min-height: 206rpx;
	}

	.balance_item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 100rpx;
	}

	.balance_itemL {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		line-height: 40rpx;
		margin-left: 30rpx;
	}

	.balance_itemR {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FF0000;
		/* line-height: 40rpx; */
		margin-right: 34rpx;
		display: flex;
		align-items: center;
	}

	.duihaoicon {
		/* 	width: 32rpx;
		height: 32rpx; */
		margin-left: 22rpx;
	}

	/* 售后弹窗样式 */
	.afterSales_box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.afterSales_title {
		font-size: 30rpx;
		font-family: Hiragino Sans GB;
		font-weight: 600;
		color: #333333;
		/* margin: 0 auto; */
		margin-top: 58rpx;

	}

	.afterSalestxt {
		width: 691rpx;
		min-height: 301rpx;
		/* height: 301rpx; */
		background: #EEEEEE;
		border: 1px solid #BBBBBB;
		border-radius: 10rpx;
		margin-top: 30rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.afterSales_in {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #999999;
	}

	.afterSalestext {
		width: 600rpx;
	}

	.afterSales_upload {
		width: 691rpx;
		margin-top: 24rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;

	}

	.upload_icon {
		width: 51rpx;
		height: 50rpx;
		/* background: #000; */
	}

	.upload_txt {
		font-size: 20rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		margin-top: 10rpx;
	}

	.uploadimg {
		margin-left: 30rpx;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.uploadimg_item {
		width: 123rpx;
		height: 123rpx;
		background: #FFFFFF;
		border: 1rpx solid #BBBBBB;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 20rpx;
		margin-right: 20rpx;
	}

	.upload_photo {
		width: 123rpx;
		height: 123rpx;
		background: #FFFFFF;
		border: 1rpx solid #BBBBBB;
		border-radius: 10rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		position: relative;
	}

	.upload_photo1 {
		width: 100%;
		height: 100%;
	}

	/* 	.upload_photo:nth-child(5) {
		margin-right: 0;
	}
	.upload_photo:nth-child(10) {
		margin-right: 0;
	} */

	.upload_close {
		width: 19rpx;
		height: 19rpx;
		/* background: #000; */
		position: absolute;
		left: 4rpx;
		top: 4rpx;
	}

	.afterSales_btn {
		width: 254rpx;
		height: 60rpx;
		background: #EF0E6C;
		border-radius: 30rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 60rpx;
		text-align: center;
		margin-top: 41rpx;
		margin-bottom: 40rpx;
	}
	/* 售后 */
	.shouhou_box1{
		width: 690rpx;
		min-height: 376rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		padding: 20rpx 0;
		
	}
	.shouhou_title{
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: 700;
		color: #333333;
		
		margin-left: 20rpx;
	}
	.shouhou_txt{
		width: 651rpx;
		min-height: 285rpx;
		background: #EEEEEE;
		border: 1rpx solid #BBBBBB;
		border-radius: 10rpx;
		margin: 0 auto;
		padding: 20rpx 18rpx;
		box-sizing: border-box;
	}
	.yuanyin{
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #999999;
		line-height: 42rpx;
	}
	.shouhou_imgbox{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 30rpx;
	}
	.shouhouimg{
		width: 139rpx;
		height: 139rpx;
		background: #FFFFFF;
		border: 1rpx solid #BBBBBB;
		border-radius: 10rpx;
		margin-right: 18rpx;
		margin-bottom: 20rpx;
	}
	.shouhouimg:nth-child(4){
		margin-right: 0;
	}
	.shouhouimg:nth-child(8){
		margin-right: 0;
	}
	.shouhouimg1{
		width: 100%;
		height: 100%;
	}
	
	.bohui_box{
		width: 100%;
		/* display: flex;
		flex-direction: column;
		align-items: center; */
		/* justify-content: center; */
	}
	.bohui_box_title{
	font-size: 30rpx;
	font-family: Hiragino Sans GB;
	font-weight: 700;
	color: #333333;
	text-align: center;
	margin-top: 60rpx;
	}
	.bohui_input_box{
		width: 691rpx;
		min-height: 301rpx;
		background: #EEEEEE;
		border: 1rpx solid #BBBBBB;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		margin-bottom: 24rpx;
	}
	.bohui_text{
		padding: 20rpx;
		min-height: 300rpx;
		
	}
	.place_class{
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #999999;
	}
	.bohui_upload{
		margin-left: 30rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	.bohui_btn{
		width: 254rpx;
		height: 60rpx;
		background: #EF0E6C;
		border-radius: 30rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 60rpx;
		text-align: center;
		margin: 20rpx auto;
	}
	.shouhou_name{
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		margin-top: 24rpx;
		margin-bottom: 20rpx;
		margin-left: 20rpx;
	}
	.shouhou_time{
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #999999;
		margin-left: 10rpx;
	
	}
	.shouhou_name1{
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		margin-bottom: 20rpx;
		margin-right: 20rpx;
		margin-top: 24rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
</style>